<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }">
      <keep-alive :include="cachedViews">
        <component :is="Component" :key="route.path" />
      </keep-alive>
    </router-view>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import useAppStore from '@/stores/modules/app'

const appStore = useAppStore()

// 获取需要缓存的路由名称列表
// 包含所有 isKeepAlive 为 true 的路由，不管 isTag 是否为 false
const cachedViews = computed(() => {
  return appStore.getCachedViews
})
</script>

<style lang="scss" scoped>
.app-main {
  min-height: calc(100vh - 84px);
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #f4f4f4;
  padding: 20px;
}

.fixed-header + .app-main {
  overflow-y: auto;
  scrollbar-gutter: auto;
  height: calc(100vh - 84px);
  min-height: 0px;
  margin-top: 84px;
}
</style>

<style lang="scss">
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}
</style>
